<template>
  <div style="color: #fff">
    <div style="margin: 20px 0">
      <el-select class="input" v-model="timeRange" placeholder="请选择">  <!--  从后台加载最新的数据 -->
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
    </div>
    <el-card>
      <div id="line" style="width: 100%; height: 400px"></div>
    </el-card>
  </div>
</template>

<script>
import request from "@/utils/request";
import * as echarts from 'echarts'

export default {
  name: 'HomeView',
  data() {
    return {
      lineBox: null,
      timeRange: 'week',
      dateX: [],
      dateY: [],
      options: [
        {label: '最近一周', value: 'week'},
        // {label: '最近一个月', value: 'month'},
        // {label: '最近两个月', value: 'month2'},
        // {label: '最近三个月', value: 'month3'},
      ]
    }
  },
  mounted() {  // 等页面元素全部初始化好
    this.getData()
  },
  methods: {
    async getData() {
      const {data: res} = await request.get("/views/borrowCountByWeek")
      let i =0
      Object.keys(res).forEach((key) => {
        let x = []
        let y = []
        y = res[key];
        x = key;
        this.dateX[i] = x
        this.dateY[i] = y
        i++
      })
      this.echartsInit()
    },
    echartsInit() {
      let dateX = []
      dateX = this.dateX
      let dateY = []
      dateY = this.dateY
      echarts.init(document.getElementById('line')).setOption({
        title: {
          text: '一周阅读人数',
          textStyle: {
            //文字颜色
            color: '#fff',
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: dateX
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: dateY,
            type: 'line',
            areaStyle: {}
          }
        ]
    })
  }
  }
}
</script>

<style>

.input {
  width: 300px;
}
</style>
